<template>
  <div>
    <a-table
      :key="tableName"
      rowKey="id"
      bordered
      size="small"
      :dataSource="dataObj"
      :columns="columns"
      :scroll="{ x: 1000 }"
      :pagination="false"
      @resizeColumn="handleResizeColumn"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.key === 'complete'">
          <a-checkbox></a-checkbox>
        </template>
        <template v-if="column.key === 'roadmap'">
          <span class="code-link" @click="viewDetail(record)"
            >{{ record.roadmap }}
          </span>
        </template>
        <template v-if="column.key === 'currentStation'">
          <span class="code-link"
            >{{ record.currentLineNo }}-{{ record.currentStation }}
          </span>
        </template>
        <template v-if="column.key === 'nextStation'">
          <span class="code-link"
            >{{ record.nextLineNo }}-{{ record.nextStation }}
          </span>
        </template>

        <template v-if="column.key === 'status'">
          <!--          status  （0运输中 1站内 2已完成）  -->
          <a-tag color="warning" v-if="record.status == 0">{{ $t('other.inTransit') }}</a-tag>
          <a-tag color="processing" v-if="record.status == 1">{{ $t('hangManage.stationIn') }}</a-tag>
          <a-tag color="success" v-if="record.status == 2">{{ $t('sysManage.completed') }}</a-tag>
        </template>
      </template>
    </a-table>
    <viewRouteModal ref="viewRouteModalRef" />
  </div>
</template>
<script setup name="listTable">
// import { computed, ref } from 'vue'
import viewRouteModal from "@/views/makeManage/routeChart/modules/editRouteModal.vue";
// import { useRouter } from 'vue-router'
import { hangersDataColumns } from "./hangerInfoConfig";
import { ref, watch } from "vue";

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
  tableName: {
    type: String,
    default: () => "hangersData",
  },
});
// const router = useRouter()
let viewRouteModalRef = ref();
let dataObj = ref({});
const columns = ref(hangersDataColumns);
const handleResizeColumn = (w, col) => {
  col.width = w;
};

const viewDetail = (record) => {
  console.log(record);
  viewRouteModalRef.value.open({
    moId: record.moId,
    routeId: record.roadmapId,
    isShowEdit: false,
    isShowAdd: false,
  });
  // router.push({
  //   path: '/makeManage/routeChart/details',
  //   query: { id: record.moId, routeId: record.roadmapId }
  // })
};

watch(
  () => props.dataSource,
  (newVal) => {
    if (newVal) {
      console.log(newVal);
      dataObj.value = newVal;
    }
  },
  { deep: true, immediate: true }
);

// const columns = computed(() => {
//   return hangersDataColumns
// })
</script>
